<template>
    <div>
        <swiper 
            loop auto :list="imgList" :index="swiperIndex" 
            @on-index-change="swiperChange" dots-position="center" @click.native="clickImg"
            :show-desc-mask="false"
        ></swiper>
    </div>
</template>

<script>
import { Swiper } from "vux";
export default {
    name:'homeSwiper',
    props:{
        bannerList:{
            type:Array,
            default:[]
        }
    },
    computed:{
        imgList(){
            let arr = Object.assign([],this.bannerList);
            arr.map(item=> item.img = item.picUrl )
            return arr;
        }
    },
    components: {
        Swiper
    },
    methods: {
        swiperChange(index) {
            this.swiperIndex = index;
        },
        clickImg(){
            // console.log(this.imgList[this.swiperIndex])
            location.href = this.imgList[this.swiperIndex]['toUrl']
            // location.href = 'http://192.168.2.218:8080/#/categoryDetail?cate=PN20180203000038'
        }
    },
    data() {
        return {
            swiperIndex: 0,
            swiperItemIndex: 1
        };
    }
};
</script>

<style scoped>
.copyright {
    font-size: 12px;
    color: #ccc;
    text-align: center;
}
.text-scroll {
    border: 1px solid #ddd;
    border-left: none;
    border-right: none;
}
.text-scroll p {
    font-size: 12px;
    text-align: center;
    line-height: 30px;
}
.black {
    background-color: #000;
}
.title {
    line-height: 100px;
    text-align: center;
    color: #fff;
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
    bottom: 30px;
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}
.fadeInUp {
    animation-name: fadeInUp;
}
.swiper-demo-img img {
    width: 100%;
}
</style>